<template>
  <div class="alg-logs h-100P flex-column bg-gray">
    <query-container @search="handleSearch" @reset="handleReset">
      <el-form
        ref="form"
        :model="queryInfo"
        :rules="rules"
        label-suffix="："
        inline
        label-width="100px"
      >
        <el-form-item label="涉及算法" prop="abilityId">
          <el-select v-model="queryInfo.abilityId" clearable>
            <el-option value="all" label="全部"></el-option>
            <el-option
              v-for="algAbility in algAbilityList"
              :key="algAbility.id"
              :label="algAbility.name"
              :value="algAbility.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商来源" prop="algOriginEnum">
          <el-select v-model="queryInfo.algOriginEnum" clearable>
            <el-option value="all" label="全部"></el-option>
            <el-option
              v-for="({label,value},index) in algOrigin"
              :key="index"
              :value="value"
              :label="label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="dataStatusEnum">
          <el-select v-model="queryInfo.dataStatusEnum" clearable>
            <el-option value="all" label="全部"></el-option>
            <el-option
              v-for="({label,value},index) in dataStatus"
              :key="index"
              :value="value"
              :label="label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词" prop="keyword">
          <el-input
            v-model="queryInfo.keyword"
            placeholder="请输入事件编号/任务名称/事件设备"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
    </query-container>
    <div class="flex-sub flex-column bg-white pd-18 mg-top-10">
      <div class="flex-sub">
        <el-table
          height="98%"
          v-loading="loading"
          :data="tableData"
          header-cell-class-name="table-header-cell"
          header-row-class-name="table-header-row"
        >
          <el-table-column label="任务编号" prop="id"></el-table-column>
          <el-table-column label="涉及算法" prop="algAbilityName"></el-table-column>
          <el-table-column label="任务名称" prop="name"></el-table-column>
          <el-table-column label="供应商" prop="algOriginName"></el-table-column>
          <el-table-column label="当前设备数" prop="deviceVos">
            <template slot-scope="{row}">
              {{ row.deviceVos ? row.deviceVos.length : 0 }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime">
            <template slot-scope="{row}">
              <span>{{ row.createTime | dateTimeFormatter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="{row}">
              <el-switch
                @change="handleChangeAlgTaskStatus(row)"
                v-model="row.dataStatusEnum"
                active-color="#67C23A"
                active-value="WORKING"
                inactive-value="STOP"
              ></el-switch>
              <span class="mg-left-10">{{ DataStatusEnum.get(row.dataStatusEnum) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="{row}">
              <div class="control">
                <el-button type="text" size="mini" class="link-text" @click="handleEdit(row)">
                  详情
                </el-button>
                <el-button type="text" size="mini" class="primary-text" @click="handleDel(row)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <img :src="emptyImage" alt="" />
          </template>
        </el-table>
      </div>
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next, total, jumper"
        :total="queryInfo.total"
        :page-size="queryInfo.pageSize"
        @current-change="handlePageNoChange"
      />
    </div>
  </div>
</template>
<script>
import QueryContainer from '@/components/query-container'
import { apiFindTaskPageByParam, apiDelAlgTaskById, apiUpdateAlgTask } from './api.js'
import { apiFindAlgAbility } from '../alg-market/api'
import { AlgOriginEnum, DataStatusEnum } from '../consts'
import { MAX_INTEGER } from 'szlschiefdata/consts'

export default {
  name: 'AlgorithmLogs',
  components: { QueryContainer },
  data() {
    return {
      loading: false,
      tableData: [],
      queryInfo: {
        abilityId: 'all',
        algOriginEnum: 'all',
        dataStatusEnum: 'all',
        total: 0,
        pageSize: 14,
        pageNo: 1,
        keyword: '',
      },
      algAbilityList: [{ id: '', name: '' }],
    }
  },
  computed: {
    rules() {
      return {}
    },
    algOrigin() {
      const toList = []
      for (const [key, value] of AlgOriginEnum) {
        toList.push({
          label: value,
          value: key,
        })
      }
      return toList
    },
    dataStatus() {
      const toList = []
      for (const [key, value] of DataStatusEnum) {
        toList.push({
          label: value,
          value: key,
        })
      }
      return toList.filter(({ value }) => ['ENABLE', 'STOP'].includes(value))
    },
    DataStatusEnum() {
      return DataStatusEnum
    },
    emptyImage() {
      return `${this.$consts.OSS_STATIC_IMAGE_URL}/empty.png`
    },
  },
  created() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.findAlgAbility()
      this.findTaskPageByParam()
    },

    handleEdit(row) {
      this.handleNavTo('/algorithm/alg-task-detail', { taskId: row.id })
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.handleSearch()
    },
    handleChangeAlgTaskStatus(row) {
      apiUpdateAlgTask({
        algAbilityId: row.id,
        dataStatusEnum: row.dataStatusEnum,
      }).then(() => {
        this.$message.success('任务状态修改成功')
      })
    },
    handleSearch() {
      this.findTaskPageByParam()
    },
    handlePageNoChange() {
      this.findTaskPageByParam()
    },
    handleCheck(row) {},
    handleNavTo(path, query) {
      this.$router.push({ path, query })
    },
    async handleDel(row) {
      this.$confirm('您确定要删除当前数据吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        this.loading = true
        await apiDelAlgTaskById(row.id)
        this.handleSearch()
        this.loading = false
      })
    },
    async findTaskPageByParam() {
      this.loading = true
      const formData = {}
      for (const key in this.queryInfo) {
        if (this.queryInfo[key] !== 'all' && this.queryInfo[key].toString().length) {
          formData[key] = this.queryInfo[key]
        }
      }
      const { records, pageNo, total } = await apiFindTaskPageByParam(formData)
      this.tableData = records
      this.queryInfo.total = total
      this.queryInfo.pageNo = pageNo
      this.loading = false
    },
    async findAlgAbility() {
      this.algAbilityList = await apiFindAlgAbility({ pageNo: 1, pageSize: MAX_INTEGER })
    },
  },
}
</script>
<style lang="scss" scoped>
.alg-logs {
  .control {
    ::v-deep {
      .el-button + .el-button {
        position: relative;
        margin-left: 0;

        & ::before {
          position: absolute;
          top: 55%;
          left: 0;
          display: block;
          width: 1px;
          height: 50%;
          background-color: #999;
          content: '';
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
